<template>
  <div class="content-in">
    <div class="banner">
      <img src="@/assets/images/contact/bg01.png" />
      <p class="ft-36">{{ lang === 'en' ? 'Contact us' : '联系我们' }}</p>
      <p class="ft-24">{{ $t('aboutUs.title') }}</p>
    </div>
    <div class="navbar">
      <div v-for="(item, index) in list" :key="index" class="navbar-in">
        <img :src="item.img" alt="" />
        <p class="city">{{ item[`city${capitalizeLang}`] }}</p>
        <h1>{{ item[`company${capitalizeLang}`] }}</h1>
        <p>{{ $t('contactUs.address') }}: {{ item[`address${capitalizeLang}`] }}</p>
        <p>{{ $t('contactUs.phone') }}: {{ item.phone }}</p>
        <p>{{ $t('contactUs.contact') }}: {{ item[`contact${capitalizeLang}`] }}</p>
        <p>{{ $t('contactUs.email') }}: {{ item.email }}</p>
        <p>{{ $t('contactUs.wechat') }}: {{ item.wechat }}</p>
      </div>
    </div>
    <div class="form">
      <h2>{{ $t('contactUs.tips') }}</h2>
      <div class="gender">
        <el-radio-group v-model="gender">
          <el-radio :label="1">{{ $t('common.form.mr') }}</el-radio>
          <el-radio :label="0">{{ $t('common.form.ms') }}</el-radio>
        </el-radio-group>
      </div>
      <div class="label"><span class="red">*</span>{{ $t('common.form.name') }}</div>
      <el-input v-model="formData.name" :placeholder="$t('login.inputName')"></el-input>
      <div class="label"><span class="red">*</span>{{ $t('common.form.phone') }}</div>
      <el-input v-model="formData.telephone" :placeholder="$t('login.inputPhone')"></el-input>
      <div class="label"><span class="red">*</span>{{ $t('common.form.email') }}</div>
      <el-input v-model="formData.email" :placeholder="$t('login.inputEmail')"></el-input>
      <div class="label"><span class="red">*</span>{{ $t('common.form.company') }}</div>
      <el-input v-model="formData.company" :placeholder="$t('login.inputCompany')"></el-input>
      <div class="label"><span class="red">*</span>{{ $t('common.form.region') }}</div>
      <el-input v-model="formData.country" :placeholder="$t('login.inputRegion')"></el-input>
      <div class="label">{{ $t('common.form.vertical-market') }}</div>
      <el-input
        v-model="formData.verticalMarket"
        :placeholder="$t('login.inputVerticalMarket')"
      ></el-input>
      <div class="label">{{ $t('common.form.howFind') }}</div>
      <el-input v-model="formData.findWay" :placeholder="$t('login.inputHowFind')"></el-input>
      <el-input
        v-model="formData.question"
        class="mg-t-30"
        type="textarea"
        :rows="4"
        :placeholder="$t('common.form.talkToMe')"
      ></el-input>
      <el-button :loading="loading" @click="handleSubmit">{{ $t('common.submit') }}</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import * as api from '@/const/api'
export default {
  data() {
    return {
      gender: 1,
      formData: {
        name: '', // 姓名
        telephone: '', // 手机
        email: '', // 邮箱
        company: '', // 公司
        country: '',
        verticalMarket: '', // 垂直市场
        findWay: '', // how to find
        question: '',
      },
      list: [
        {
          img: require('@/assets/images/contact/shenzhen.png'),
          cityZh: '深圳',
          cityEn: 'Shenzhen',
          companyZh: '深圳市硕腾科技有限公司（总部）',
          companyEn: 'Shenzhen Soten Technology Co., Ltd',
          addressZh: '中国·深圳市南山区西丽街道白芒社区沙河西路5318号2栋1001',
          addressEn:
            '1001, Building 2, No. 5318, Shahe West Road, Baimang Community, Xili Street, Nanshan District, Shenzhen, China',
          phone: '（0755）61827963',
          contactZh: '刘小姐',
          contactEn: 'Miss Liu',
          email: 'hr@soten.com.cn',
          wechat: 'hrsoten111228',
        },
        {
          img: require('@/assets/images/contact/chengdu.png'),
          cityZh: '成都',
          cityEn: 'Chengdu',
          companyZh: '成都市必派科技有限公司',
          companyEn: 'Chengdu Bipai Technology Co., Ltd',
          addressZh: '中国（四川）自由贸易试验区成都高新区府城大道西段399号7栋1单元11楼2号',
          addressEn:
            'No. 2, 11th Floor, Unit 1, Building 7, No. 399, West Section of Fucheng Avenue, Chengdu High-tech Zone, China (Sichuan) Pilot Free Trade Zone',
          phone: '+86-18030450798',
          contactZh: '徐先生',
          contactEn: 'Mr Xu',
          email: 'bepai201804@gmail.com',
          wechat: 'wasai_123',
        },
        // {
        //   img: require('@/assets/images/contact/shanghai.png'),
        //   cityZh: '上海',
        //   cityEn: 'Shanghai',
        //   companyZh: '上海市硕腾科技有限公司',
        //   companyEn: 'Shanghai Soten Technology Co., Ltd',
        //   addressZh: '中国·深圳市南山区沙河西路5308号百旺研发大厦2栋10楼',
        //   addressEn:
        //     '10th Floor, Building 2, Baiwang R&D Building, No. 5308, Shahe West Road, Nanshan District, Shenzhen, China',
        //   phone: '+86(0755)-6188515661827963',
        //   contactZh: '',
        //   contactEn: '',
        //   email: '',
        //   wechat: '',
        // },
        {
          img: require('@/assets/images/contact/chongqing.png'),
          cityZh: '重庆',
          cityEn: 'Chongqing',
          companyZh: '重庆阿酷斯科技有限公司',
          companyEn: 'Chongqing Akusi Technology Co., Ltd',
          addressZh: '中国·重庆市江北区北城天街15号负2号138-3号',
          addressEn: 'No. 138-3, No. 15, Beicheng Tianjie, Jiangbei District, Chongqing, China',
          phone: '+86-17783622608',
          contactZh: '李小姐',
          contactEn: 'Miss Li',
          email: '985581756@qq.com',
          wechat: '17783622608',
        },
      ],
      loading: false,
    }
  },
  computed: {
    ...mapState(['lang']),
    ...mapGetters(['capitalizeLang']),
  },
  methods: {
    async handleSubmit() {
      try {
        if (this.loading) {
          return
        }
        const flag = Object.entries(this.formData).every(([key, value]) => {
          if (!value && key !== 'question') {
            return false
          }
          return true
        })

        if (!flag) {
          throw new Error(this.$t('common.form.info'))
        }

        const params = {
          ...this.formData,
          userLang: this.lang,
          sex: this.gender ? 1 : 0,
          model: this.$route.query.model || '',
        }
        this.loading = true
        const { code, msg } = await this.$axios.$post(api.userQuestion, params)
        if (+code !== 200) {
          throw new Error(msg || this.$t('common.form.error'))
        }

        this.$message.success(this.$t('common.form.success'))
        this.formData = {}
      } catch (err) {
        err.message && this.$message.error(err.message)
      } finally {
        this.loading = false
      }
    },
  },
}
</script>

<style lang="less" scoped>
.content-in {
  display: flex;
  flex-direction: column;

  .banner {
    display: flex;
    position: relative;
    color: #fff;
    font-weight: bold;

    img {
      width: 100%;
    }

    .ft-36 {
      position: absolute;
      left: 50%;
      top: 337px;
      transform: translateX(-50%);
    }

    .ft-24 {
      position: absolute;
      left: 50%;
      top: 387px;
      transform: translateX(-50%);
      text-align: center;
    }
  }

  .navbar {
    padding: 60px 24px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .navbar-in {
      width: 702;
      box-shadow: 0 0 16px 0 rgba(32, 32, 32, 0.23);
      padding: 0 0 55px 0;
      position: relative;

      p {
        padding: 0 24px;
        font-size: 24px;
        margin-bottom: 4px;
      }

      h1 {
        padding: 0 24px 24px 24px;
        font-size: 30px;
        font-weight: 500;
        position: relative;

        &::after {
          content: '';
          display: block;
          height: 4px;
          width: 60px;
          top: 38px;
          position: absolute;
          background-color: #0762cb;
        }
      }

      img {
        margin: 0 0 48px 0;
        width: 100%;
        height: 210px;
        display: block;
      }

      .city {
        font-size: 30px;
        top: 90px;
        left: 60px;
        color: #fff;
        position: absolute;
        padding: 0;
        font-weight: bold;
      }
    }
  }

  .form {
    width: 702px;
    background: #f6f7f9;
    margin: 100px auto 0 auto;
    padding: 40px 24px;

    h2 {
      font-size: 36px;
      font-weight: 500;
      color: #0762cb;
    }

    .label {
      font-size: 30px;
      line-height: 90px;
    }

    .gender {
      margin-top: 30px;
    }

    .mg-t-30 {
      margin-top: 30px;
    }

    .el-button {
      width: 344px;
      height: 60px;
      background: #0261bc;
      border-radius: 30px;
      color: #fff;
      border: none;
      line-height: 30px;
      padding: 0;
      margin: 40px auto 0 auto;
      display: block;
    }
  }
}
</style>
